<template>
  <div class="m-4 service-home-item">
    <div class="p-6 w-full h-full">
      <div class="text-center">
        <el-image
          :src="data.icon"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
        />
      </div>
      <h2 class="text-center item-title whitespace-nowrap pt-4">
        {{ data.title }}
      </h2>
      <p class="service-home-item-content pt-4">{{ data.value }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>
<style lang="scss" scoped>
.service-home-item {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.item-title {
  color: var(--color-text-title);
  font-size: var(--text-h2-size);
  font-weight: 600;
}

.service-home-item-content {
  color: var(--color-text-primary);
  font-size: var(--text-sub-size);
  height: 5rem;
}
</style>
